<template>
  <div class="childWrapper">
    <Modal v-model="state"
           @on-cancel="sendMsg()">
      <div class="childStyle">{{message}}</div>
      <div>点击确定或者取消按钮 要让父级知道我已经关闭窗口，使用$emit</div>

      <div>
        <ul v-for="item in stuData"
            :key="item.name">
          <li>{{item.name}} -- {{item.age}} 岁</li>
        </ul>
        <Button type="primary"
                @click="send2Brother">传递给兄弟</Button>
      </div>
      <div slot="footer">
        <Button @click="sendMsg()">取消</Button>
        <Button type="primary"
                @click="sendMsg()">确定</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    },
    flag: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      state: this.flag,
      stuData: [{ name: 'vita', age: 18 }, { name: 'lin', age: 18 }, { name: 'mx', age: 18 }]
    }
  },
  watch: {
    flag () {
      this.state = this.flag
    }
  },
  methods: {
    sendMsg () {
      this.$emit('closeModal', false)
    },
    send2Brother () {
      this.bus.$emit('add', this.stuData)
    }
  }
}
</script>

<style scoped>
.childStyle {
  color: red;
}
</style>